
<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('languages.title')}} 
            </h2>
            <cly-tooltip-icon :tooltip="description" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"> </cly-tooltip-icon>
            </span>
        </template>
		<template v-slot:header-right>
          <cly-more-options v-if="topDropdown" size="small">
            <el-dropdown-item :key="idx" v-for="(item, idx) in topDropdown">
              <!--<span :class="item.icon"></span>-->
              <a :href="item.value" class="bu-ml-1">{{item.label}}</a>
            </el-dropdown-item>
          </cly-more-options>
        </template>
    </cly-header>
    <cly-main>
		<cly-date-picker-g class="languages-date-picker-container"></cly-date-picker-g>
		<cly-section>
			<div class="bu-columns bu-is-gapless">
				<div class="bu-column bu-is-6">
					<cly-chart-pie :option="pieOptionsTotal" :showToggle="false"  :force-loading="isLoading" v-loading="isLoading"></cly-chart-pie>
				</div>
				<div class="bu-column bu-is-6">
					<cly-chart-pie :option="pieOptionsNew" :showToggle="false"  :force-loading="isLoading" v-loading="isLoading"></cly-chart-pie>
				</div>
			</div>
		</cly-section>
		<cly-section>
			<cly-datatable-n  :rows="appRows" :exportFormat="formatExportFunction" :resizable="true" :force-loading="isLoading" v-loading="isLoading">
				<template v-slot="scope">
					<el-table-column sortable="custom" prop="langs" :label="i18n('languages.table.language')"></el-table-column>
					<el-table-column sortable="custom" prop="t" :label="i18n('common.table.total-sessions')">
						<template slot-scope="scope">
                            <div class="bu-level">
                                <div class="bu-is-flex user-activity-table__data-item-container">
                                    <div class="bu-level bu-is-justify-content-flex-start">
                                        <span>{{formatNumber(scope.row.t)}}</span>
                                    </div>
                                    <div class="bu-level user-activity-table__divider">
                                        <span>|</span>
                                    </div>
                                    <div class="bu-level bu-is-justify-content-flex-end">
                                        <span>{{scope.row.tPerc}}%</span>
                                    </div>
                                </div>
                                <cly-progress-bar  :percentage="parseInt(scope.row.tPerc)" :height=8 > </cly-progress-bar>
                            </div>
                        </template>
					</el-table-column>
					<el-table-column sortable="custom" prop="u" :label="i18n('common.table.total-users')">
						<template slot-scope="scope">
                            <div class="bu-level">
                                <div class="bu-is-flex user-activity-table__data-item-container">
                                    <div class="bu-level bu-is-justify-content-flex-start">
                                        <span>{{formatNumber(scope.row.u)}}</span>
                                    </div>
                                    <div class="bu-level user-activity-table__divider">
                                        <span>|</span>
                                    </div>
                                    <div class="bu-level bu-is-justify-content-flex-end">
                                        <span>{{scope.row.uPerc}}%</span>
                                    </div>
                                </div>
                                <cly-progress-bar  :percentage="parseInt(scope.row.uPerc)" :height=8 > </cly-progress-bar>
                            </div>
                        </template>
					</el-table-column>
					<el-table-column sortable="custom" prop="n" :label="i18n('common.table.new-users')">
						<template slot-scope="scope">
                            <div class="bu-level">
                                <div class="bu-is-flex user-activity-table__data-item-container">
                                    <div class="bu-level bu-is-justify-content-flex-start">
                                        <span>{{formatNumber(scope.row.n)}}</span>
                                    </div>
                                    <div class="bu-level user-activity-table__divider">
                                        <span>|</span>
                                    </div>
                                    <div class="bu-level bu-is-justify-content-flex-end">
                                        <span>{{scope.row.nPerc}}%</span>
                                    </div>
                                </div>
                                <cly-progress-bar  :percentage="parseInt(scope.row.nPerc)" :height=8 > </cly-progress-bar>
                            </div>
                        </template>
					</el-table-column>
				</template>
			</cly-datatable-n>
		</cly-section>
    </cly-main>
</div>